<html lang="en-gb" class="no-js">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>王鑫瑞的个人主页</title>
    <link rel="icon" href="images/香蕉.png">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
    <!-- 控制字体轮滑效果 -->
    <link rel="stylesheet" type="text/css" href="css/da-slider.css" />
    <!-- Font Awesome -->
    <link href="font/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css" />
</head>

<body>
    <header class="header">
        <div class="container">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="navbar-header">
                    <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse"
                        data-target="#main-nav">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand scroll-top logo"><b>Wang xinrui</b></a>
                </div>
                <!--/.navbar-header-->
                <div id="main-nav" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav" id="mainNav">
                        <li class="active"><a href="#home" class="scroll-link">Home</a></li>
                        <li><a href="#aboutUs" class="scroll-link">About Us</a></li>
                        <li><a href="#skills" class="scroll-link">Display</a></li>
                        <li><a href="#">Back</a></li>
                    </ul>
                </div>
                <!--/.navbar-collapse-->
            </nav>
            <!--/.navbar-->
        </div>
        <!--/.container-->
    </header>
    <!--/.header-->

    <section id="home">
        <div class="banner-container">
            <img src="images/banner-bg.jpg" alt="banner" />
            <div class="container banner-content">
                <div class="personal-img">
                    <img src="images/网站头像.jpg" alt="">
                </div>
                <div class="pulse"></div>
                <div class="pulse1"></div>
                <div id="da-slider" class="da-slider">
                    <div class="da-slide">
                        <h2>嗨</h2>
                        <p>欢迎來到我的個人主頁</p>
                        <div class="da-img"></div>
                    </div>
                    <div class="da-slide">
                        <h2>在这里，</h2>
                        <p>你可以看到<br>我与生活偶遇的萬次惊喜</p>
                        <div class="da-img"></div>
                    </div>
                    <div class="da-slide">
                        <h2>在这里，</h2>
                        <p>你还可以看到<br>我与IT叙不完的旧情</p>
                        <div class="da-img"></div>
                    </div>
                    <div class="da-slide">
                        <h2>在这里，</h2>
                        <p>...............</p>
                        <div class="da-img"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="introText">
        <div class="container">
            <div class="text-center">
                <h2>不浮夸，不过分解读</h2>
                <p>多希望我现在能有一辆老旧的皮卡，一只毛长到看不见眼的古老狗。一杯兑了养乐多的金酒，插片贼酸的柠檬
                    那只狗一直舔我的耳朵，偷喝着我的杯中佳酿。然后车中循环着《加州旅馆》与《波西米亚狂想曲》。
                    我唱着歌，飞驰在根本看不到的无人区沙漠公路，哦，对了，有把温彻斯特在身边是最好的，毕竟很有安全感……
                    我们的痛苦会变成在我们以后生活的那些人的欢乐，人们会用好话提起现在活着的人，并且感谢他们。军乐奏得这么欢乐，
                    这么欢畅，放佛再过一会儿我们就会知道我们活着是为了什么，我们痛苦是为了什么。要是能够知道就好了，要是能够知道就好了，要是能够知道就好了
                </p>
            </div>
        </div>
    </section>

    <!--About-->
    <section id="aboutUs" class="secPad">
        <div class="container">
            <div class="heading text-center">
                <!-- Heading -->
                <h2>個人簡介</h2>
                <p>我叫王鑫瑞，来自山西长治，现在是武汉工程大学计算机科学与工程学院数媒专业的大三学生</p>
                <p>我是一个积极乐观，兴趣爱好广泛，没有拖延症的男生。</p>
                <p>分辨出什么是喜欢做的，什么是应该做的，是人变成熟的开始；
                    而懂得怎样把应该变成喜欢，在“应该”中找到快乐，是成熟到强大的钥匙。
                </p>
                <p>生活，可以简单点。世界，可以广阔点。</p>
            </div>
            <div class="row">
                <!-- item -->
                <div class="col-md-4 text-center tileBox">
                    <div class="txtHead">
                        <img src="images/personal-photo1.jpg" alt="">
                        <h3>独立<span class="id-color">Independent</span></h3>
                    </div>
                    <p>同纸醉金迷的城市风光比起来，每个人都是小人物，但我的喜怒哀乐，我的周遭，这都是我的世界，我要尊重它，也要到别人的世界去瞧一瞧</p>
                </div>
                <!-- end: -->

                <!-- item -->
                <div class="col-md-4 text-center tileBox">
                    <div class="txtHead">
                        <img src="images/personal-photo2.jpg" alt="">
                        <h3>自信 <span class="id-color">Confident</span></h3>
                    </div>
                    <p>在不可抗拒的成为一个懂分寸、会来事，但却寡淡无味的成年人之前尽量在每一个深夜和喜欢的人彻夜扯闲篇，守着火锅，抱着啤酒……</p>
                </div>
                <!-- end: -->

                <!-- item -->
                <div class="col-md-4 text-center tileBox">
                    <div class="txtHead">
                        <img src="images/personal-photo3.jpg" alt="">
                        <h3>不妥协 <span class="id-color">Uncompromising</span></h3>
                    </div>
                    <p>没有恰到好处得事情，只有恰如其分的心情。既然年轻，也就不用怎么挑剔了，重油重辣，重情重义，大鱼大肉，大悲大喜，全都消化的下</p>
                </div>
                <!-- end: -->
            </div>
        </div>
    </section>

    <!--Quote-->
    <section id="quote" class="bg-parlex">
        <div class="parlex-back">
            <div class="container secPad text-center">
                <h3>当时站在三岔路口，眼见风云千樯<br><br>你作出选择的那一日<br><br>在日记上，相当沉闷和平凡<br><br>当时,还以为是生命中普通的一天。</h3>
            </div>
        </div>
    </section>

    <!--Display-->
    <section id="skills" class="secPad white">
        <div class="container">
            <div class="heading text-center">
                <!-- Heading -->
                <h2>我的作品展示</h2>
            </div>
            <section class="services" id="services-section">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper first-service">
                                    <div class="front">
                                        <div class="icon">
                                            <h2>诗意生活</h2>
                                        </div>
                                    </div>
                                    <div class="back">
                                        <div class="icon">
                                            <a href="html/诗意生活.html"><img src="images/诗意生活.jpg" alt="item01"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper second-service">
                                    <div class="front">
                                        <div class="icon">
                                            <h2>个人网站</h2>
                                        </div>
                                    </div>
                                    <div class="back">
                                        <div class="icon">
                                            <a href="html/个人网站.html"><img src="images/个人网站.jpg" alt="item02"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper third-service">
                                    <div class="front">
                                        <div class="icon">
                                            <h2>武汉工程大学</h2>
                                        </div>
                                    </div>
                                    <div class="back">
                                        <div class="icon">
                                            <a href="html/武汉工程大学.html"><img src="images/武汉工程大学.jpg" alt="item03"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper fourth-service">
                                    <div class="front">
                                        <div class="icon">
                                            <h2>家居医生首页</h2>
                                        </div>
                                    </div>
                                    <div class="back">
                                        <div class="icon">
                                            <a href="html/家居医生列表.html"><img src="images/家居医生.jpg" alt="item04"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper fifth-service">
                                    <div class="front">
                                        <div class="icon">
                                            <h2>家居医生生活家</h2>
                                        </div>
                                    </div>
                                    <div class="back">
                                        <div class="icon">
                                            <a href="html/家居医生生活家.html"><img src="images/家居医生生活家.jpg" alt="item05"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper sixth-service">
                                    <div class="front">
                                        <div class="icon">
                                            <h2>家居医生用户中心</h2>
                                        </div>
                                    </div>
                                    <div class="back">
                                        <div class="icon">
                                            <a href="html/家居医生用户中心.html"><img src="images/家居医生用户中心.jpg"
                                                    alt="item06"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper seventh-service">
                                    <div class="front">
                                        <div class="icon">
                                            <h2>小米官网</h2>
                                        </div>
                                    </div>
                                    <div class="back">
                                        <div class="icon">
                                            <a href="html/小米商城登录界面.html"><img src="images/小米官网.jpg" alt="item07"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper eighth-service">
                                    <div class="front">
                                        <div class="icon">
                                            <h2>小米首页</h2>
                                        </div>
                                    </div>
                                    <div class="back">
                                        <div class="icon">
                                            <a href="html/小米官网.html"><img src="images/小米商城.jpg" alt="item08"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper ninth-service">
                                    <div class="front">
                                        <div class="icon">
                                            <h2>木兮地板</h2>
                                        </div>
                                    </div>
                                    <div class="back">
                                        <div class="icon">
                                            <a href="html/木兮地板.html"><img src="images/木兮地板.jpg" alt="item09"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>
    </section>

    <footer>
        <div class="container">
            <div class="social text-center">
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-dribbble"></i></a>
                <a href="#"><i class="fa fa-weibo"></i></a>
                <a href="https://github.com/Afterwards997"><i class="fa fa-github"></i></a>
            </div>
            <div class="clear"></div>
            <!-- CLEAR FLOATS -->
        </div>
    </footer>
    <a href="#top" class="topHome"><i class="fa fa-chevron-up fa-2x"></i></a>

    <script src="js/modernizr-latest.js"></script>
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/jquery.isotope.min.js" type="text/javascript"></script>
    <script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script src="js/jquery.nav.js" type="text/javascript"></script>
    <script src="js/jquery.cslider.js" type="text/javascript"></script>
    <script src="contact/jqBootstrapValidation.js"></script>
    <script src="contact/contact_me.js"></script>
    <script src="js/custom.js" type="text/javascript"></script>
    <script src="js/owl-carousel/owl.carousel.js"></script>
</body>

</html>